<template>
    <div class="search">
        <el-autocomplete @select="goDetail" clearble placeholder="请你输入医院名称" :trigger-on-focus="false" v-model="hosname"
            :fetch-suggestions="fetchData" />
        <el-button type="primary" size="default" :icon="Search">搜索</el-button>
    </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { reqHospitalInfo } from "@/api/home";
import type { HospitalInfo } from "@/api/home/type";
// 创建路由器对象
let $router = useRouter();
// 收集搜索的关键字(医院的名字)
import { ref } from 'vue';
let hosname = ref<string>('');
// 顶部组件的回调
const fetchData = async (keyword: string, cb: any) => {
    // 当用户输入完关键字，此函数会执行一次，发请求需要展示的数据即可
    let result: HospitalInfo = await reqHospitalInfo(keyword);
    // 整理数据，变成组件需要的数据
    let showData = result.data.map(item => {
        return {
            value: item.hosname,  //展示的医院的名字
            hoscode:item.hoscode  //展示的医院编码
        }
    })
    cb(showData)
}

// 点击某个推荐项目
const goDetail = (item:any)=>{
    // 点击推荐项目进入医院详情页,携带query参数(医院的编码)
    $router.push({path:'/hospital/register',query:{hosname:item.hoscode}})
}
</script>

<style scoped lang="scss">
.search {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;

    ::v-deep(.el-input__wrapper) {
        width: 600px;
        margin-right: 10px;
    }
}
</style>